<template>
  <div class="goodslist">
    <div class="table_auto">
      <el-table :data="tableData" stripe style="width: 100%" height="100%" border>
        <el-table-column prop="order_name" label="订单号" width="180"></el-table-column>
        <el-table-column prop="order_price" label="订单价格" />
        <el-table-column prop="order_num" label="订单数量" width="180" />
        <el-table-column prop="order_addr" label="订单地址" width="180" />
        <el-table-column prop="order_create_time" label="下单时间" width="180" />
        <el-table-column fixed="right" label="操作">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="openInfo(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_style pagination_auto">
      <el-pagination
        v-model:currentPage="order_list_form.page"
        :page-size="order_list_form.pageSize"
        :background="true"
        layout="total, prev, pager, next"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import AdminAPI from "@/api/system/admin.api";

let order_list_form = ref({
  page: 1,
  pageSize: 10,
});
let count = ref(0);
let tableData = ref([]);

function openInfo(row: any) {}

async function getOrderList() {
  let res = await AdminAPI.orderList({ ...order_list_form.value });
  count.value = res.total;
  tableData.value = res.rows;
}

function handleSizeChange() {
  getOrderList();
}

function handleCurrentChange() {
  getOrderList();
}

onMounted(() => {
  getOrderList();
});
</script>

<style lang="scss" scoped>
.goodslist {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  margin: 5px 0;
  width: 100px;
  padding-left: 10px;
}
.table_auto {
  min-height: 0;
  flex: 1 1 auto;
}
.pagination_style {
  padding: 10px;
  background: #fff;
}
.pagination_auto {
  flex: none;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
